<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>请假申请</title>
    <link rel="stylesheet" href="/scriptZIP/layui.min.css">
    <link rel="stylesheet" href="../css/item.css">
    <link rel="stylesheet" href="/scriptZIP/vue-select.min.css">
    <style>
        .layui-row {
            margin-top: 50px;
        }

        .offer {
            width: 90px;
            height: 35px;
            background: #1E9FFF;
            color: white;
            text-align: center;
            line-height: 35px;
            font-size: 16px;
            border-radius: 4px;
        }

        .return {
            width: 80px;
            height: 35px;
            background: #1E9FFF;
            color: white;
            text-align: center;
            line-height: 35px;
            margin-top: -35px;
            margin-left: 130px;
            font-size: 16px;
            border-radius: 4px;
        }

        .vs__dropdown-toggle {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            display: flex;
            padding: 0 0 4px;
            background: 0 0;
            border-radius: 4px;
            white-space: normal;
            width: 50%;
            background-color: #ffffff;
            height: 38px;
        }

        .vs__dropdown-menu {
            width: 50%;
        }
    </style>

</head>

<body>
    <br>
    <br>
    <div class="layui-row" id="vue-root">
        <div class="layui-form-item" v-if="!isEdit">
            <label class="layui-form-label">校区</label>
            <div class="layui-input-block">
                <v-select placeholder="请选择校区" label="name" :options="schools" :reduce="item => item.id"
                    v-model="schoolId"></v-select>
            </div>
        </div>
        <div class="layui-form-item" v-if="!isEdit">
            <label class="layui-form-label">学员姓名</label>
            <div class="layui-input-block">
                <v-select placeholder="请选择学员" label="name" :options="students" :reduce="item => item.id"
                    v-model="item.studentId"></v-select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">课程</label>
            <div class="layui-input-block">
                    <v-select multiple placeholder="请选择课程" label="name" :options="courses" :reduce="item=>item.id"
                        v-model="item.courseIds"></v-select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">申请时间</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" id="openingTime" v-model="item.applicationTime" placeholder="选择时间">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" id="expiryDate" v-model="item.startTime" placeholder="选择时间">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" id="renewalTime" v-model="item.endTime" placeholder="选择时间">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">停课理由</label>
            <div class="layui-input-block">
                <input name="cardnumber" v-validate="'required'" autocomplete="off" placeholder="请输入理由"
                    class="layui-input cardnumber" v-model="item.reason">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <div class="offer" @click="submit">立即提交</div>
                <div class="return" onclick="history.back()">取消</div>
            </div>
        </div>

    </div>


    <script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>


	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/vue-select.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/lib/laydate/laydate.js"></script>
	<script src="/js/common.js"></script>
	<script src="/js/item.js"></script>
	<script src="/js/area.js"></script>


    <script>
        Vue.component('v-select', VueSelect.VueSelect);
        var agentId = top_params().id;
        var app = new Vue(merge({
            el: '#vue-root',
            data: {
                url: '/pc/leave',
                item: {
                    studentId: null,
                    typeOfLeave:1,
                    applicantId:localStorage.getItem('staffUserId'),
                    courseIds:[]
                    
                },
                isEdit: false,
                schoolId:null,
                students: [],
                schools: [],
                courses: [],
                studentId: null,
            },
            created: function () {
                axios.get('/pc/school/all/' + agentId).then(function (res) {
						this.schools = res.data;
					}.bind(this));
                    const id = params().id;
                if (id) {
                    this.isEdit = true;
                }

                this.init();

            
            },
            methods: {

            },
            watch: {
                'schoolId': function (newValue, oldValue) {
            if (newValue) {
                
                axios.get('/pc/student/all1/' + newValue).then(function (res) {
                    this.students = res.data;
                    if (this.item.studentId) {
                        this.item.studentId = this.students.find(student => student.id === this.item.studentId)?.id || null;
                    }
                }.bind(this));
            }
        },
                'item.studentId': function (newValue, oldValue) {
                    if (newValue)
                        axios.get('/pc/student/all2/' + newValue).then(function (res) {
                            this.courses = res.data;
                           
                        }.bind(this));
                },
            }
        }));
        laydate.render({
    elem: '#openingTime',
    type: 'datetime',
    done: function (value, date, endDate) {
        app.item.applicationTime = value;
    }
});

laydate.render({
    elem: '#expiryDate',
    type: 'datetime',
    done: function (value, date, endDate) {
        app.item.startTime = value;
    }
});

laydate.render({
    elem: '#renewalTime',
    type: 'datetime',
    done: function (value, date, endDate) {
        app.item.endTime = value;
    }
});
    </script>

</body>

</html>
